import React, {Component} from 'react';
import Logo from "../../component/logo/logo";
import {
    Button,
    WingBlank,
    WhiteSpace,
    List,
    InputItem,
    Flex,
} from 'antd-mobile';
import {Redirect} from 'react-router-dom';
import {connect} from 'react-redux';
import {register} from "../../redux/user.redux";

//使用connect中间件
@connect(
    state => state.user,
    {register}
)
export default class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            BtnAbled: false,
            getCode: "获取验证码",
            userPhone: "",
            userPassword: "",
            repeatPassword: "",
            authCode: "",
            type: "general"
        };
        this.skipLogin = this.skipLogin.bind(this);
        this.registerClick = this.registerClick.bind(this);
        this.getAuthCode = this.getAuthCode.bind(this);
    }

    render() {
        return (
            <div>
                {this.props.redirectTo ? <Redirect to={this.props.redirectTo} /> : null}
                <Logo/>
                <h1 align="center">注册</h1>
                <WingBlank>
                    <List>
                        {this.props.msg ? <p className="redText" align="center">{this.props.msg}</p> : null}
                        <InputItem onChange={(v) => this.handleChange("userPhone", v)}>手机号</InputItem>
                        <Flex directio="row">
                            <InputItem
                                onChange={(v) => this.handleChange("authCode", v)}
                                className="eighty"
                            >
                                验证码
                            </InputItem>
                            <Button className="twenty" disabled={this.state.BtnAbled} type="ghost" size="small"
                                    onClick={this.getAuthCode}>
                                {this.state.getCode}
                            </Button>
                        </Flex>
                        <InputItem onChange={(v) => this.handleChange("userPassword", v)}>密码</InputItem>
                        <InputItem onChange={(v) => this.handleChange("repeatPassword", v)}>确认密码</InputItem>
                    </List>
                    <WhiteSpace size="xl"/>
                    <Button type="primary" onClick={this.registerClick}>注册</Button>
                    <p align="center" className="blueText" onClick={this.skipLogin}>返回登录</p>
                </WingBlank>
            </div>
        )
    }

    //前往登录
    skipLogin() {
        this.props.history.push('/login');
    }

    //获取输入
    handleChange(key, val) {
        this.setState({
            [key]: val
        });
    }

    //点击注册
    registerClick() {
        this.props.register(this.state);
    }

    //获取验证码
    getAuthCode() {
        //遗留一些小问题，点击之后disable问题
        let time = 8;
        this.setState({
            getCode: `${time}秒后获取`,
            BtnAbled: true
        });
        let clock = setInterval(() => {
            time--;
            if (time > 0) {
                this.setState({
                    getCode: `${time}秒后获取`
                });
            } else {
                this.setState({
                    getCode: `获取验证码`,
                    BtnAbled: false
                });
                time = 5;
                clearInterval(clock);
            }
        }, 1000);
        console.log("点击了获取验证码");
    };
}

